<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'

export default {
  // type  testAll test1 test2
  props: ['type'],
  data() {
    return {
      color: ['#80FABA', '#2BF8E3', '#3BD5FD', '#266BFF', '#5E52F9', '#80FABA', '#2BF8E3', '#2BF8E3'],
      textColor: '#00e6ff',
      titleData: '',
      legendName: [],
      seriesList: [],
      charts: '',
      xList: [],
      timerList: [],
      monitorName: '',
    }
  },
  computed: {
    options() {
      const Echarts = require('echarts')
      return {
        echartsTime: [],
        title: {
          text: this.titleData,
          x: 'center',
          textStyle: {
            color: this.textColor
          }
        },
        //提示框组件
        tooltip: {
          // 设置为坐标轴触发
          trigger: 'axis',
          // 提示框悬浮内容格式器
          formatter: (params, ticket, callback) => {
            var contentArr = []
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              if (i === 0) {
                contentArr.push(Format(new Date(data.value[0])))
              }
              contentArr.push(data.marker + data.seriesName + '位移值：' + data.value[1] + 'mm')
            }
            let remark = params[0]?.data?.remark || ''
            remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
            return contentArr.join('<br/>')
          },
        },
        // 图例组件
        legend: {
          data: this.legendName,
          y: 'top',
          x: 'right',
          padding: [30, 100, 0, 0],
          // 设置为可滚动的图例
          type: 'scroll',
          textStyle: {
            color: this.textColor
          }
        },
        // 直角坐标系内绘图网格
        grid: {
          left: 40,
          right: 30,
          bottom: 20,
          // 区域是否包含坐标轴的刻度标签
          containLabel: false
        },
        // grid x轴
        xAxis: {
          splitLine: {
            show: false
          },
          type: 'time',
          boundaryGap: false,
          axisLine: {onZero: false},
          axisLabel: { // 坐标轴标签样式设置
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              const date = new Date(value)
              if (date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0) {
                return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
              }
              return Echarts.format.formatTime('hh:mm:ss', new Date(value))
            },
            show: true,
            textStyle: {
              color: this.textColor
            },
          },
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        },
        yAxis: {
          max: function (value) {
            if (value.max < 5) {
              return 5;
            }
            return Math.ceil(value.max);//向上取整
          },
          name: '位移（mm）',
          type: 'value',
          nameTextStyle: {
            color: this.textColor
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        },
        series: this.seriesList
      }
    }
  },
  methods: {
    updateEchart(list, monitorName) {
      this.charts.clear()
      this.charts.resize()
      this.legendName = []
      this.seriesList = []
      this.titleData = monitorName + '相对位移'
      let colorIndex = 0
      list.map((x) => {
        this.legendName.push(x.sensorName)
        this.seriesList.push({
          name: x.sensorName,
          type: 'line',
          smooth: true,
          symbol: 'none',
          symbolSize: 4,
          data: x.relativeValue,
          itemStyle: {
            normal: {
              color: this.color[colorIndex]
            }
          },
        },)
        colorIndex++
      })
      this.charts.setOption(this.options)
    },
  },
  created() {
  },
  mounted() {
    const Echarts = require('echarts')
    this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
    window.addEventListener('resize', this.echartResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.echartResize)
  }
}
</script>
